<template>
  <div class="imageAd">
    <!-- 一行一个&绘制热区 -->
    <div
      v-if="!config.show_method"
      :style="{ padding: '0 ' + config.page_margin + 'px' }"
    >
      <img
        v-for="(item, index) in config.sub_entry"
        class="cap-image-ad__image"
        :style="{ margin: config.img_margin + 'px 0' }"
        :class="{
          shadow: config.image_style
        }"
        :key="index"
        :src="item.image_url"
        alt=""
      />
    </div>
    <!-- 轮播 -->
    <div
      v-if="config.show_method === 1"
      :style="{ padding: '0 ' + config.page_margin + 'px' }"
    >
      <el-carousel height="200px">
        <el-carousel-item
          v-for="(item, index) in config.sub_entry"
          :key="index"
        >
          <img
            class="cap-image-ad__image"
            :class="{
              shadow: config.image_style
            }"
            :key="index"
            :src="item.image_url"
            alt=""
          />
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 大图横向滑动&小图横向滑动&导航横向滑动 -->
    <div
      class="pictureSwipe"
      :class="{
        big: config.show_method === 2,
        small: config.show_method === 3
      }"
      :style="{ padding: '0 ' + config.page_margin + 'px' }"
      v-if="
        config.show_method === 2 ||
          config.show_method === 3 ||
          config.show_method === 4
      "
    >
      <img
        v-for="(item, index) in config.sub_entry"
        class="cap-image-ad__image"
        :class="{
          shadow: config.image_style
        }"
        :style="imgStyles"
        :key="index"
        :src="item.image_url"
        alt=""
      />
    </div>
  </div>
</template>

<script>
import adbg from '../assets/img/adbg.png'

export default {
  props: ['value'],
  data() {
    return {
      adbg,
      config: this.value ? this.value : {}
    }
  },
  watch: {
    value(newVal) {
      this.config = newVal
    }
  },
  computed: {
    imgStyles() {
      if (this.config.show_method === 4) {
        return {
          margin: '0 ' + this.config.img_margin + 'px',
          width: 100 / this.config.count + '%',
          // height: 100 / this.config.count + '%'
        }
      }
      return {
        margin: '0 ' + this.config.img_margin + 'px'
      }
    }
  },
  methods: {
    jump() {
      this.$router.push(this.config.link)
    }
  }
}
</script>

<style lang="less">
.imageAd {
  .cap-image-ad__image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    border: 0;
    &.shadow {
      box-shadow: 0 4px 10px rgba(47, 54, 70, 0.1);
    }
  }
  .pictureSwipe {
    width: auto;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    &::-webkit-scrollbar {
      height: 6px;
      background-color: #f1f1f1;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #b2b2b2;
      border-radius: 6px;
    }
    .cap-image-ad__image {
      display: inline-block;
    }
    &.big {
      .cap-image-ad__image {
        height: 200px;
      }
    }
    &.small {
      .cap-image-ad__image {
        width: 150px;
        height: 150px;
      }
    }
  }
}
</style>
